
@use "../../theme.scss" as *;
// {bem_b,bem_e,VueAndNvueStyleAttr}
@use "./mixin/mixins.scss" as *;
@use './mixin/function.scss' as *;
// {set-component-css-var}
@use "./mixin/_var.scss" as *;

@import 'common/index.scss';

@include bem_b(cell) {
    $e-cell-padding: 10px 15px !default;
    $e-cell-label-font-size: 12px !default;
    $e-cell-label-line-height: 18px !default;
    $e-cell-value-font-size: 14px !default;
    $e-cell-clickable-color: $e-bg-color !default;
    $e-cell-disabled-color: #c8c9cc !default;
    $e-cell-padding-top-large: 13px !default;
    $e-cell-padding-bottom-large: 13px !default;
    $e-cell-value-font-size-large: 15px !default;
    $e-cell-label-font-size-large: 14px !default;
    $e-cell-title-font-size-large: 16px !default;
    $e-cell-left-icon-wrap-margin-right: 4px !default;
    $e-cell-right-icon-wrap-margin-left: 4px !default;
    $e-cell-title-flex: 1 !default;
    $e-cell-label-margin-top: 5px !default;

    @include bem_e(body) {
        @include flex();
        /* #ifndef APP-NVUE */
        box-sizing: border-box;
        /* #endif */
        padding: $e-cell-padding;
        @include VueAndNvueStyleAttr("font-size","cell", "title-font-size");
        @include VueAndNvueStyleAttr("color","text-color", "primary");
        align-items: center;

        &__content {
            @include flex(row);
            align-items: center;
            flex: 1;
        }

        @include bem_m(large) {
            padding-top: $e-cell-padding-top-large;
            padding-bottom: $e-cell-padding-bottom-large;
        }
    }

    &__left-icon-wrap,
    &__right-icon-wrap {
        @include flex();
        align-items: center;
        @include VueAndNvueStyleAttr("font-size","cell", "icon-size");
    }

    &__left-icon-wrap {
        margin-right: $e-cell-left-icon-wrap-margin-right;
    }

    &__right-icon-wrap {
        margin-left: $e-cell-right-icon-wrap-margin-left;
        transition: transform 0.3s;

        &--up {
            transform: rotate(-90deg);
        }

        &--down {
            transform: rotate(90deg);
        }
    }

    @include bem_e(title) {
        flex: $e-cell-title-flex;

        &-text {
            @include VueAndNvueStyleAttr("font-size","cell", "title-font-size");
            @include VueAndNvueStyleAttr("line-height","cell", "title-line-height");
            @include VueAndNvueStyleAttr("color","text-color", "primary");

            &--large {
                font-size: $e-cell-title-font-size-large;
            }
        }
    }


    @include bem_e(label) {
        margin-top: $e-cell-label-margin-top;
        font-size: $e-cell-label-font-size;
        @include VueAndNvueStyleAttr("color","text-color", "secondary");
        line-height: $e-cell-label-line-height;

        @include bem_m(large) {
            font-size: $e-cell-label-font-size-large;
        }
    }

    @include bem_e(value) {
        text-align: right;
        font-size: $e-cell-value-font-size;
        @include VueAndNvueStyleAttr("line-height","cell", "line-height");
        @include VueAndNvueStyleAttr("color","text-color", "regular");

        @include bem_m(large) {
            font-size: $e-cell-value-font-size-large;
        }

    }

    @include bem_e(clickable) {
        background-color: $e-cell-clickable-color;
    }

    @include bem_e(disabled) {
        color: $e-cell-disabled-color;
        /* #ifndef APP-NVUE */
        cursor: not-allowed;
        /* #endif */
    }

    @include bem_e(center) {
        align-items: center;
    }

}